2. باستخدام getElementsByClassName

javascript
CopyEdit
var elements = document.getElementsByClassName("myClass");

3. باستخدام getElementsByTagName

javascript
CopyEdit
var paragraphs = document.getElementsByTagName("p");

4. باستخدام querySelector أو querySelectorAll

javascript
CopyEdit
var firstDiv = document.querySelector("div");
var allDivs = document.querySelectorAll("div");

هذه الطرق تعتبر الأساس لأي عملية تنسيق لاحقة، حيث تمكِّن من تحديد العنصر المراد تعديل خصائصه.

ثالثًا: التلاعب بالخصائص النمطية عبر خاصية style

بعد الوصول إلى العنصر، يمكن تعديل خصائصه النمطية باستخدام خاصية style. على سبيل المثال:

javascript
CopyEdit
var element = document.getElementById("title");
element.style.color = "blue";
element.style.fontSize = "24px";
element.style.margin = "10px";

بعض الخصائص الشائعة التي يمكن تعديلها:

رابعًا: استخدام الفئات (CSS Classes)

غالبًا ما تكون طريقة تعديل الأنماط عبر الفئات أكثر تنظيمًا ومرونة من التعديل المباشر على الخصائص. يمكن باستخدام جافاسكربت إضافة أو إزالة فئات CSS كما يلي:

1. إضافة فئة:

javascript
CopyEdit
element.classList.add("highlight");

2. إزالة فئة:

javascript
CopyEdit
element.classList.remove("highlight");

3. التبديل بين فئتين:

javascript
CopyEdit
element.classList.toggle("active");

هذه الطريقة فعالة جدًا في تطبيق مجموعة أنماط محددة مسبقًا في ملف CSS، مما يسهل إدارة الكود وتحسين أدائه.

خامسًا: التحكم بأساليب التنسيق باستخدام الأحداث

تتيح جافاسكربت ربط التعديلات النمطية بسلوك المستخدم، مثل الضغط على زر أو تمرير الفأرة على عنصر ما. ويتم ذلك باستخدام الأحداث مثل click و mouseover و mouseout.

مثال: تغيير لون خلفية عنصر عند الضغط عليه

html
CopyEdit
<button id="changeColorBtn">اضغط لتغيير الخلفيةbutton>
<div id="box" style="width:200px;height:200px;">div>

<script>
  document.getElementById("changeColorBtn").addEventListener("click", function() {
    document.getElementById("box").style.backgroundColor = "green";
  });
script>

سادسًا: التلاعب بسمة className و style.cssText

استخدام className لتعيين فئة جديدة:

javascript
CopyEdit
element.className = "newClass";

استخدام style.cssText لتطبيق عدة أنماط دفعة واحدة:

javascript
CopyEdit
element.style.cssText = "color: red; font-size: 18px; background-color: yellow;";

هذا الخيار مناسب عندما نرغب في تغيير نمط العنصر جذريًا باستخدام سلسلة واحدة.

سابعًا: التلاعب بالتحولات والرسوم المتحركة

يمكن لجافاسكربت التحكم بخصائص الرسوم المتحركة والتحولات (Transitions) بطريقة ديناميكية عبر CSS.

مثال: تطبيق تحول سلس على عنصر

css
CopyEdit
/* في ملف CSS */
.animated-box {
  transition: all 0.3s ease-in-out;
}

javascript
CopyEdit
var box = document.getElementById("box");
box.classList.add("animated-box");
box.style.transform = "scale(1.2)";

يؤدي هذا إلى تكبير العنصر بشكل سلس عند إضافته.

ثامنًا: التنسيق بناءً على استجابة الشاشة (Responsive Design)

يمكن التحكم في تنسيق العناصر تبعًا لحجم الشاشة باستخدام جافاسكربت، وهي مفيدة لتصميم صفحات متجاوبة.

مثال على تغيير حجم الخط حسب عرض النافذة:

javascript
CopyEdit
window.addEventListener("resize", function() {
  var width = window.innerWidth;
  var title = document.getElementById("title");
  if (width < 600) {
    title.style.fontSize = "16px";
  } else {
    title.style.fontSize = "24px";
  }
});

تاسعًا: إنشاء عناصر HTML ديناميكيًا وتنسيقها

لا تقتصر جافاسكربت على تعديل عناصر موجودة، بل يمكن إنشاء عناصر جديدة وتطبيق أنماط عليها:

javascript
CopyEdit
var newDiv = document.createElement("div");
newDiv.textContent = "عنصر جديد";
newDiv.style.backgroundColor = "orange";
newDiv.style.padding = "20px";
document.body.appendChild(newDiv);

هذه التقنية مفيدة في بناء واجهات تفاعلية حسب سلوك المستخدم.

عاشرًا: استخدام الجافاسكربت مع CSS Variables

تتيح متغيرات CSS الحديثة إمكانية التلاعب بها من خلال جافاسكربت، مما يوفر إمكانيات متقدمة لتخصيص السمات.

css
CopyEdit
:root {
  --main-color: #333;
}
.box {
  background-color: var(--main-color);
}

javascript
CopyEdit
document.documentElement.style.setProperty("--main-color", "#ff0000");

جدول يلخص طرق تنسيق العناصر عبر جافاسكربت

الخاتمة

يمثل استخدام جافاسكربت في تنسيق عناصر صفحة HTML أداة قوية تفتح آفاقًا واسعة لتطوير واجهات مستخدم غنية وتفاعلية. من خلال التحكم المباشر بخواص العناصر أو التلاعب بالفئات النمطية وربط ذلك بأحداث المستخدم، يمكن بناء صفحات ديناميكية تستجيب للسياق وتقدم تجربة متقدمة للمستخدم. ويصبح هذا الأسلوب أكثر قوة ومرونة عند دمجه مع مفاهيم متقدمة مثل CSS Variables والتحولات، ما يجعله خيارًا رئيسيًا لكل مطور يسعى إلى بناء تطبيقات ويب حديثة ومتميزة.

المراجع:

1. MDN Web Docs – Manipulating Styles with JavaScript

2. W3Schools – HTML DOM Styling